<template>
  <!--案场运营排行榜 -->
  <el-row style="height:100%">
    <page report="true">
      <div class="page-content report-con">
        <reportheader
          :option="option"
          :isCaseShow="false"
          :Caseradio='false'
          :tags='global.tags'
          :showDisabled="showDisabled"
          @upcondition="upcondition"
        ></reportheader>
        <div class="hei13"></div>
        <reportrank :kpislist="kpislist" :titleName="global.title"
                    :KPIType="kpiType" @RankKpiTypeChange="RankKpiTypeChange"
                    :RankTop10="RankTop10" :RankLast10="RankLast10"  ref='Rank'>
        </reportrank>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  .page-content {
    &.report-con {
      padding: 0 0;
      .dragmove{
        z-index: 0;
      }
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .hei13 {
      height: 15px;
      width: 100%;
    }
  }
</style>
<script>
  let moment = require("moment");

  import page from "@/components/page/page";
  import reportheader from "@/components/analyzeReport/reportpublic/reportheader";
  import reportrank from "@/components/analyzeReport/reportpublic/reportRank";
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  let unit=reportGlobal.unit;
  export default {
    data: function() {
      var option = {
        shortcuts:'dayShortcuts',
        isAreaShow: false,                 //是否显示区域，如显示需传title 默认不显示
        title: "",
      };
      return {
        title:'案场运营排行榜',
        option: option,
        DataV:{},          //head条件接收
        global:{},
        kpiType:'',         //选中的指标
        showDisabled:{
          sum_or_part:false,
          time_or_distr:false,
        },
        kpislist:[],
        RankTop10:[],
        RankLast10:[],
        code:this.$route.query.code,        //通过菜单栏点击传过来的code判断使用的公共参数
      };
    },
    components: {
      page,
      reportheader,
      reportrank,
    },
    created() {
      for(let i in reportGlobal.queryList){
        if( this.code == reportGlobal.queryList[i].code){
          this.global = reportGlobal.queryList[i]
        }
      }
    },
    mounted() {
      for(let i in this.global.indicator_keys){
        let obj ={
          name:reportGlobal.name[this.global.indicator_keys[i]],
          key:this.global.indicator_keys[i],
        }
        this.kpislist.push(obj)
      }
      // console.log(this.kpislist,'kpislist');
      this.kpiType = this.global.indicator_keys[0];
    },
    watch: {},
    methods: {
      upcondition(data){
        if(data.company_id){
          this.DataV=data;
          this.$Bus.$emit('Loading',true);
          this.Updata();
          // this.getKpis(data.company_id);//企业id
        }else{
          this.$message.error('请选择企业！');
          this.$Bus.$emit("Loading", false);
          return
        }
      },
      //获取指标接口
      getKpis(id,org_type=1){
        id = id.split(',')
        let url='/sys/report_assist_new/get_indicator_list'
        let data = {
          org_id_list : id,
          org_type : org_type,
        }
        this.$api.post(url,data)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data){
            this.kpislist = data.data.filter(x=>{
              return this.global.indicator_keys.includes(x.key)
            })

          } else{
            this.$Bus.$emit('Loading',false);
          }
        })
        .catch(err=>{
          this.removeData();
          console.log(err,'企业下无指标');
          this.$Bus.$emit('Loading',false);
        })
      },
      Updata() {
        this.$Bus.$emit("Loading", true);
        let url="/sys/report_range/case-ranking-companyids-or-caseids?ranking_num=10&tags="+ this.global.tags+ "&indicator_key=" +this.kpiType;
        url += "&start_day=" + this.DataV.start_day + "&end_day=" + this.DataV.end_day+"&start_hm="+this.DataV.start_hm+"&end_hm="+this.DataV.end_hm;
        let params = {
          org_id_list : this.DataV.company_id.split(','),
          org_type : 1
        }
        this.$api.post(url,params)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
          }
          if (data.data!=null&&Object.keys(data.data).length>0) {
            this.setRankData(data.data);
          } else {
            console.log("企业下无数据,");
            this.removeData();
            this.$Bus.$emit("Loading", false);
          }
        })
        .catch(err => {
           console.log(err);
          this.removeData();
          this.$Bus.$emit("Loading", false);
        });
      },
      //指标点击
      RankKpiTypeChange(val) {
        this.kpiType = val
        this.$Bus.$emit('Loading', true);
        this.Updata()
      },
      //给组件传值
      setRankData(data) {
        let top = [];
        let last = [];

        for (let i = 0; i < data.top_list.length; i++) {
          let top_model = {};
          let last_model = {};

          top_model.name = data.top_list[i].case_info_name;
          last_model.name = data.last_list[i].case_info_name;
          top_model.value = data.top_list[i][this.kpiType];
          last_model.value = data.last_list[i][this.kpiType];
          top_model.unit = unit[this.kpiType];
          last_model.unit = unit[this.kpiType];

          top.push(top_model);
          last.push(last_model);
        }
        this.RankTop10 = top;
        this.RankLast10 = last;
        this.$nextTick(() => {
          this.$Bus.$emit("Loading", false);
        })
      },
      removeData(){
        this.RankTop10=[];
        this.RankLast10=[];
        this.$nextTick( ()=>{
          this.$Bus.$emit("Loading", false);
        })
      }
    }
  };
</script>
